<template>
  <div>
    <!-- 商品筛选 -->
    <van-dropdown-menu>
      <van-dropdown-item disabled v-model="value1" title="综合" :options="option1" />
      <van-dropdown-item v-model="value2" @input="price(value2)" title="价格" :options="option2" />
      <van-dropdown-item v-model="value3" @input="price1(value3)" title="分类" :options="option3" />
    </van-dropdown-menu>

    <!-- 商品遍历 -->
    <van-grid :border="false" :column-num="2">
      <van-grid-item v-for="item2 in goodsList.data" :key="item2.id" @click="detail(item2.id)">
        <img :src="item2.list_pic_url" width="90%" alt />
        <p class="yin">{{item2.name}}</p>
        <p class="price">￥ {{item2.retail_price}} 元</p>
      </van-grid-item>
    </van-grid>

  </div>
</template>

<script>
export default {
  props: ["goodsList"],
  data() {
    return {
      value1: "",
      value2: "",
      value3: "",
      order: "",
      //   goodsList:[],
      option1: [{ text: "综合", value: 0 }],
      option2: [
        // { text: "价格", value: "a" },
        { text: "价格由高到低", value: "desc" },
        { text: "价格由低到高", value: "asc" }
      ],
      option3: [
        // { text: "分类", value: "a" },
        { text: "全部", value: "0" },
        { text: "居家", value: "1005000" }
      ]
    };
  },
  methods: {
    // 跳转到详情页
    detail(d) {
      // console.log(d);
      this.$router.push("/detail/" + d);
    },
    // 子传父，传id和value
    price(v) {
      // console.log(v);
      this.$emit("order", v);
    },
    price1(v) {
      // console.log(v);
      this.$emit("categoryId", v);
    }
  },
  components: {}
};
</script>

<style lang='less' scoped>
.flex {
  // width: 100%;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  background-color: #fff;
}
.list {
  background-color: #fff;
  text-align: left;
  display: inline-block;
  font-size: 楷体;
  img {
    height: 100%;
  }
  p {
    font-size: 9.9975px;
    height: 15px;
    padding-left: 0.3333rem;
    margin-bottom: 0.0833rem;
    font-family: "宋体";
  }
  .price {
    color: rgb(203, 104, 104);
  }
}
// 商品的遍历
.yin {
  padding: 0 .0667rem;
  padding-bottom:.2667rem;
  height: .1333rem;
}
.price{
    color: rgb(183, 87, 87);
}
</style>
